<template>
  <div class="singer" ref="singerEntity">
    <div v-lazy :style="{backgroundImage: `url(${singer.head})`}"
         @click="onMusicList(singer)">
      <!--      <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-Vrenzheng"></use>
              </svg>
            </div>-->
    </div>
    <div>{{ info }}</div>
  </div>
</template>

<script>
import {useStore} from "vuex";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "Singer",
  description: {
    // 歌手
  },
  props: {
    singer: Object
  },
  setup(props, ctx) {
    let router = useRouter();
    const store = useStore();

    let singerEntity = ref();
    let info = ref();

    function onMusicList(singer) {
      console.log("singer", singer)
      let singerMusicList = {};
      //根据歌单id请求歌曲
      singerMusicList.type = "singer";
      singerMusicList.id = singer.id;
      singerMusicList.title = singer.name;
      singerMusicList.img = singer.head;
      singerMusicList.user = singer.info;

      console.log(singerMusicList)
      router.push({
        name: "songSheet",
        query: {
          ...singerMusicList
        }
      })
    }

    function getInfo(singer) {
      store.dispatch("kugouNet/getSingerInfoNetStore", singer).then((value) => {
        info.value = value;
      })
    }

    let xRange = [-3, 3]
    let yRange = [-3, 3]

    function getRotate(range, value, max) {
      return (value / max) * (range[1] - range[0]) + range[0];
    }


    onMounted(() => {
      getInfo(props.singer);
      singerEntity.value.onmousemove = e => {
        const {offsetX, offsetY} = e;
        const {offsetWidth, offsetHeight} = singerEntity.value;
        const rx = getRotate(xRange, offsetY, offsetHeight);
        const ry = -getRotate(yRange, offsetX, offsetWidth);
        console.log(offsetX, offsetY)
        singerEntity.value.style.setProperty('--singerX', `${rx}deg`);
        singerEntity.value.style.setProperty('--singerY', `${ry}deg`);
      }
      singerEntity.value.onmouseleave = () => {
        singerEntity.value.style.setProperty('--singerX', `0deg`);
        singerEntity.value.style.setProperty('--singerY', `0deg`);
      }
    })

    return {
      singerEntity,
      info,
      onMusicList,

    }
  }
}
</script>

<style scoped lang="less">
@import url("@/assets/less/1.less");

.singer {
  width: 290px;
  height: 400px;
  background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
  border-radius: 1rem;
  z-index: 2;
  backdrop-filter: blur(1rem);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  transform: perspective(300px) rotateX(var(--singerX, 0deg)) rotateY(var(--singerY, 0deg));

  & > div:first-child {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 160px;
    height: 160px;
    background-size: 160px;
    border-radius: 50%;

    div svg {
      .icon-min(@c:#54a6f8);
    }
  }

  & > div:last-child {
    width: 250px;
    height: 190px;
    color: @ffc;
    overflow-x: hidden;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      //display: none;
      width: 10px; //定义滚动条宽度
      height: 10px; //定义滚动条高度
      /*width: 20px;*/
      border-radius: 10px; //定义滚动条圆角
    }

    &::-webkit-scrollbar-track {
      border-radius: 10px;
      /*滚动条里面轨道*/
      background: #40434d;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px; //定义滑块圆角
      box-shadow: inset 0 0 0 rgba(240, 240, 240, .5); //定义滑块阴影
      background-color: @fc //定义滑块颜色
    }
  }
}
</style>
